<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slidesContainer">
<div id="slide01" data-slide="s1" class="slide slide01 active">
<div class="bcg"></div>
<div class="slideContent">
<h1>Slide 1 Title</h1>
<p>This is a short description.</p>
</div>
</div>
<div id="slide02" data-slide="s2" class="slide slide02">
<div class="bcg"></div>
<div class="slideContent">
<h1>Slide 2 Title</h1>
<p>This is a short description.</p>
</div>
</div>
<div id="slide03" data-slide="s3" class="slide slide03">
<div class="bcg"></div>
<div class="slideContent">
<h1>Slide 3 Title</h1>
<p>This is a short description.</p>
</div>
</div>
<div id="slide04" data-slide="s0" class="slide slide04">
<div class="bcg"></div>
<div class="slideContent">
<h1>Slide 4 Title</h1>
<p>This is a short description.</p>
</div>
</div>
<ul class="nav">
<li class="active"><a id="s0" href="#slide01">Slide 1</a></li>
<li><a id="s1" href="#slide02">Slide 2</a></li>
<li><a id="s2" href="#slide03">Slide 3</a></li>
<li><a id="s3" href="#slide04">Slide 4</a></li>
</ul>
</div>
<script>
(function ($) {
// Variables
var sectionFrom,
$slide = $('.slide'),
$slideActive = $('.slide.active'),
$navLink = $('.nav a'),
$navLi = $('.nav li'),
$body = $('body');
// Init function
function init() {
// Set active slide visible
TweenLite.set($slideActive, {
x: '0%'
});
// Fade slides in
TweenLite.set($body, {
className: '-=loading'
});
}
init();
// Navigation click
$navLink.on('click', function (e) {
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
// prevent animation when animating
if (!$body.hasClass('is-animating')) {
var sectionFrom = $('.slide.active'),
sectionToID = $(e.target).attr('href'),
sectionTo = $('div' + sectionToID);
if (sectionFrom.attr('id') !== sectionTo.attr('id')) {
scrollToSection(sectionFrom, sectionTo);
}
}
});
function scrollToSection(sectionFrom, sectionTo) {
var heading = sectionTo.find('h1'),
subheading = sectionTo.find('p'),
bcg = sectionTo.find('.bcg'),
bcgFrom = sectionFrom.find('.bcg'),
tlDown = new TimelineLite({
onComplete: setActiveSection(sectionFrom, sectionTo)
}),
tlUp = new TimelineLite();
if (sectionFrom.index() < sectionTo.index()) {
//console.log('going down');
tlDown
.set($body, {
className: '+=is-animating'
})
.to(sectionFrom, 1.2, {
x: '-=100%',
ease: Power4.easeInOut,
clearProps: 'all'
}, '0')
.to(sectionTo, 1.2, {
x: '0%',
ease: Power4.easeInOut
}, '0')
.to(bcgFrom, 1.2, {
x: '30%',
ease: Power4.easeInOut,
clearProps: 'all'
}, '0')
.from(bcg, 1.2, {
x: '-30%',
ease: Power4.easeInOut,
clearProps: 'all'
}, '0')
.from(heading, 0.7, {
autoAlpha: 0,
x: 40,
ease: Power4.easeInOut
}, '-=1')
.from(subheading, 0.7, {
autoAlpha: 0,
x: 40,
ease: Power4.easeInOut
}, '-=0.6')
.set($body, {
className: '-=is-animating'
});
} else {
//console.log('going up');
tlUp
.set($body, {
className: '+=is-animating'
})
.set(sectionTo, {
x: '-100%'
})
.to(sectionFrom, 1.2, {
x: '100%',
ease: Power4.easeInOut,
clearProps: 'all'
}, '0')
.to(sectionTo, 1.2, {
x: '0%',
ease: Power4.easeInOut
}, '0')
.to(bcgFrom, 1.2, {
x: '-30%',
ease: Power4.easeInOut,
clearProps: 'all'
}, '0')
.from(bcg, 1.2, {
x: '30%',
ease: Power4.easeInOut,
clearProps: 'all'
}, '0')
.from(heading, 0.7, {
autoAlpha: 0,
x: 40,
ease: Power4.easeInOut
}, '-=1')
.from(subheading, 0.7, {
autoAlpha: 0,
x: 40,
ease: Power4.easeInOut
}, '-=0.6')
.set($body, {
className: '-=is-animating'
});
}
}
function setActiveSection(sectionFrom, sectionTo) {
// Add active class to the current slide
sectionFrom.removeClass('active');
sectionTo.addClass('active');
// Add a body class highlighting the current slide
$body.removeAttr('class').addClass($(sectionTo).attr('id') + '-active');
// Highlight current slide in the navigation
var currentSlideIndex = parseInt($(sectionTo).attr('id').slice(-2)) - 1;
$navLi.removeAttr('class');
$navLi.eq(currentSlideIndex).addClass('active');
}
})(jQuery);
$('.slide').bind('mousewheel', function (e) {
$("#" + $(this).attr('data-slide')).trigger('click');
});
</script>
body {
font: 16px/1.5 'Open Sans', Helvetica, Helvetica Neue, Arial, sans-serif;
background-color: #2e2e30;
color: #fff;
}
h1,
h2,
h3,
h4 {
font-weight: 700;
}
.slidesContainer {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: hidden;
}
.slideContent {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
.slideContent h1 {
font-size: 24px;
margin-bottom: 5px;
line-height: 1em;
}
.slideContent p {
font-size: 14px;
color: rgba(255, 255, 255, 0.7);
margin: 0;
}
/* =Project Slides */
.slide {
height: 100%;
text-align: center;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
transform: translateX(100%);
transition: opacity 0.3s linear, visibility 0.3s linear;
opacity: 1;
visibility: visible;
}
.loading {
opacity: 0;
visibility: hidden;
}
.bcg {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
opacity: 0.9;
z-index: 1;
}
.slide01 .bcg {
background-image: url('https://s-media-cache-ak0.pinimg.com/736x/80/91/f9/8091f9dceb2ea55fa7b57bb7295e1824--hd-iphone--wallpapers-backgrounds-wallpapers.jpg');
}
.slide02 .bcg {
background-image: url(https://www.planwallpaper.com/static/images/880665-road-wallpapers.jpg);
}
.slide03 .bcg {
background-image: url(https://s-media-cache-ak0.pinimg.com/736x/80/91/f9/8091f9dceb2ea55fa7b57bb7295e1824--hd-iphone--wallpapers-backgrounds-wallpapers.jpg');
}
.slide04 .bcg {
background-image: url(https://www.planwallpaper.com/static/images/880665-road-wallpapers.jpg);
}
.slide04 .slideContent h1 {
color: #222;
}
.slide04 .slideContent p {
color: rgba(0, 0, 0, 0.7);
}
/* =Navigation */
.nav {
position: fixed;
bottom: 40px;
right: 40px;
left: 40px;
list-style: none;
z-index: 3;
margin: 0;
padding: 0;
}
.nav li {
float: left;
list-style: none;
width: 25%;
text-align: center;
}
.nav a {
color: #222;
display: block;
text-decoration: none;
padding: 8px 16px;
font-size: 12px;
border: 1px rgba(255, 255, 255, 0.7) solid;
border-width: 1px 0 1px 1px;
background-color: rgba(255, 255, 255, 0.2);
transition: all 0.3s linear;
}
.nav li:last-child a {
border-width: 1px
}
.nav li.active a {
background-color: rgba(255, 255, 255, 0.8);
}
